<!doctype html>
<html lang="zh-Hans">

<head>
    <meta charset="utf-8">
    <meta name="author" content="Fresns" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="generator" content="Bootstrap 5">
    <title>列表模块介绍</title>
    <link rel="stylesheet" href="../../assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../assets/css/bootstrap-icons.css">
    <link rel="stylesheet" href="../../assets/css/fresns.css">
</head>

<body>
    <!--页头-->
    <header>
        <div class="text-center mt-5"><img src="../../assets/images/fresns-icon.png" height="80"></div>
    </header>

    <div class="container-fluid mb-5">
        <div class="text-center my-5">
            <div class="text-center mt-3">
                <div class="btn-group">
                    <a href="extend.html" class="btn btn-outline-primary active">样式</a>
                    <a href="../code/extend.html" class="btn btn-outline-primary">结构</a>
                    <a href="../desc/extend.html" class="btn btn-outline-primary">说明</a>
                </div>
            </div>
        </div>
        <ul class="nav nav-tabs justify-content-center">
            <li class="nav-item"><a class="nav-link" href="../index.html">首页</a></li>
            <li class="nav-item"><a class="nav-link" href="member.html">成员列表</a></li>
            <li class="nav-item"><a class="nav-link" href="group.html">小组列表</a></li>
            <li class="nav-item"><a class="nav-link" href="hashtag.html">话题列表</a></li>
            <li class="nav-item"><a class="nav-link" href="post.html">帖子列表</a></li>
            <li class="nav-item"><a class="nav-link" href="comment.html">评论列表</a></li>
            <li class="nav-item"><a class="nav-link active" href="extend.html">扩展内容模板</a></li>
            <li class="nav-item"><a class="nav-link" href="implant.html">植入内容模板</a></li>
        </ul>
    </div>

    <div class="lists-box clearfix">
        <h5>扩展内容框</h5>
        <div class="card p-3">
            <!--信息框扩展 开始-->
            <!--正方形小图-->
            <div class="position-relative frame-box-info mb-3">
                <div class="d-flex align-items-center">
                    <div class="flex-shrink-0">
                        <img src="../../assets/images/temp/frame-info.jpg" class="frame-image-basis">
                    </div>
                    <div class="flex-grow-1 px-3">
                        <div class="frame-title">Fresns 是一款免费开源的社交网络服务软件，专为跨平台而打造的通用型社区产品，支持灵活多样的内容形态，可以满足多种运营场景，符合时代潮流，更开放且更易于二次开发。</div>
                    </div>
                </div>
                <div class="position-absolute top-50 end-0 translate-middle-y content-link">
                    <a href="#" role="button" class="btn btn-info btn-sm me-3">按钮</a>
                </div>
                <a href="post.html" class="text-decoration-none stretched-link"></a>
            </div>
            <div class="position-relative frame-box-info mb-3">
                <div class="d-flex align-items-center">
                    <div class="flex-shrink-0">
                        <img src="../../assets/images/temp/frame-info.jpg" class="frame-image-basis">
                    </div>
                    <div class="flex-grow-1 px-3">
                        <div class="frame-title">Fresns 是一款免费开源的社交网络服务软件，专为跨平台而打造的通用型社区产品</div>
                    </div>
                </div>
                <a href="post.html" class="text-decoration-none stretched-link"></a>
            </div>
            <div class="position-relative frame-box-info mb-3">
                <div class="d-flex align-items-center">
                    <div class="flex-shrink-0">
                        <img src="../../assets/images/temp/frame-info.jpg" class="frame-image-basis">
                    </div>
                    <div class="flex-grow-1 px-3">
                        <div class="frame-title">Fresns 是一款免费开源的社交网络服务软件</div>
                    </div>
                </div>
                <div class="position-absolute top-50 end-0 translate-middle-y content-link">
                    <a href="#" role="button" class="btn btn-info btn-sm me-3">这是一个长文字按钮</a>
                </div>
                <a href="post.html" class="text-decoration-none stretched-link"></a>
            </div>
            <!--正方形大图-->
            <div class="position-relative frame-box-info mb-3">
                <div class="d-flex align-items-center">
                    <div class="flex-shrink-0">
                        <img src="../../assets/images/temp/frame-info.jpg" class="frame-image-big">
                    </div>
                    <div class="flex-grow-1 px-3">
                        <div class="d-flex flex-column frame-box-big">
                            <div class="frame-title">Fresns 是一款免费开源的社交网络服务软件，专为跨平台而打造的通用型社区产品，支持灵活多样的内容形态，可以满足多种运营场景，符合时代潮流，更开放且更易于二次开发。</div>
                            <div class="frame-desc mt-auto">副信息</div>
                            <div class="frame-desc mt-auto" style="color:#F00;">副信息</div>
                        </div>
                    </div>
                </div>
                <div class="position-absolute top-50 end-0 translate-middle-y content-link">
                    <a href="#" role="button" class="btn btn-info me-3">长文字按钮</a>
                </div>
                <a href="post.html" class="text-decoration-none stretched-link"></a>
            </div>
            <div class="position-relative frame-box-info mb-3">
                <div class="d-flex align-items-center">
                    <div class="flex-shrink-0">
                        <img src="../../assets/images/temp/frame-info.jpg" class="frame-image-big">
                    </div>
                    <div class="flex-grow-1 px-3">
                        <div class="d-flex flex-column frame-box-big">
                            <div class="frame-title">Fresns 是一款免费开源的社交网络服务软件，专为跨平台而打造的通用型社区产品，支持灵活多样的内容形态，可以满足多种运营场景，符合时代潮流，更开放且更易于二次开发。</div>
                            <div class="frame-desc mt-auto">副信息</div>
                        </div>
                    </div>
                </div>
                <div class="position-absolute top-50 end-0 translate-middle-y content-link">
                    <a href="#" role="button" class="btn btn-info me-3">长文字按钮</a>
                </div>
                <a href="post.html" class="text-decoration-none stretched-link"></a>
            </div>
            <div class="position-relative frame-box-info mb-3">
                <div class="d-flex align-items-center">
                    <div class="flex-shrink-0">
                        <img src="../../assets/images/temp/frame-info.jpg" class="frame-image-big">
                    </div>
                    <div class="flex-grow-1 px-3">
                        <div class="d-flex flex-column frame-box-big">
                            <div class="frame-title">Fresns 是一款免费开源的社交网络服务软件</div>
                            <div class="frame-desc mt-auto">副信息</div>
                            <div class="frame-desc mt-auto" style="color:#F00;">副信息</div>
                        </div>
                    </div>
                </div>
                <a href="post.html" class="text-decoration-none stretched-link"></a>
            </div>
            <!--纵向图-->
            <div class="position-relative frame-box-info mb-3">
                <div class="d-flex align-items-center">
                    <div class="flex-shrink-0">
                        <img src="../../assets/images/temp/frame-info.jpg" class="frame-image-portrait">
                    </div>
                    <div class="flex-grow-1 px-3">
                        <div class="d-flex flex-column frame-box-portrait">
                            <div class="frame-title">Fresns 是一款免费开源的社交网络服务软件，专为跨平台而打造的通用型社区产品，支持灵活多样的内容形态，可以满足多种运营场景，符合时代潮流，更开放且更易于二次开发。</div>
                            <div class="frame-desc mt-auto">副信息</div>
                            <div class="frame-desc mt-auto" style="color:#F00;">副信息</div>
                        </div>
                    </div>
                </div>
                <a href="post.html" class="text-decoration-none stretched-link"></a>
            </div>
            <!--横向图-->
            <div class="position-relative frame-box-info mb-3">
                <div class="d-flex align-items-center">
                    <div class="flex-shrink-0">
                        <img src="../../assets/images/temp/frame-info.jpg" class="frame-image-landscape">
                    </div>
                    <div class="flex-grow-1 px-3">
                        <div class="d-flex flex-column frame-box-landscape">
                            <div class="frame-title">Fresns 是一款免费开源的社交网络服务软件，专为跨平台而打造的通用型社区产品，支持灵活多样的内容形态，可以满足多种运营场景，符合时代潮流，更开放且更易于二次开发。</div>
                            <div class="frame-desc mt-auto">副信息</div>
                            <div class="frame-desc mt-auto" style="color:#F00;">副信息</div>
                        </div>
                    </div>
                </div>
                <a href="post.html" class="text-decoration-none stretched-link"></a>
            </div>
            <div class="position-relative frame-box-info mb-3">
                <div class="d-flex align-items-center">
                    <div class="flex-shrink-0">
                        <img src="../../assets/images/temp/frame-info.jpg" class="frame-image-landscape">
                    </div>
                    <div class="flex-grow-1 px-3">
                        <div class="d-flex flex-column frame-box-landscape">
                            <div class="frame-title">Fresns 是一款免费开源的社交网络服务软件</div>
                            <div class="frame-desc mt-auto">副信息</div>
                            <div class="frame-desc mt-auto" style="color:#F00;">副信息</div>
                        </div>
                    </div>
                </div>
                <a href="post.html" class="text-decoration-none stretched-link"></a>
            </div>
            <div class="position-relative frame-box-info mb-3">
                <div class="d-flex align-items-center">
                    <div class="flex-shrink-0">
                        <img src="../../assets/images/temp/frame-info.jpg" class="frame-image-landscape">
                    </div>
                    <div class="flex-grow-1 px-3">
                        <div class="d-flex flex-column frame-box-landscape">
                            <div class="frame-title">Fresns 是一款免费开源的社交网络服务软件，专为跨平台而打造的通用型社区产品，支持灵活多样的内容形态，可以满足多种运营场景，符合时代潮流，更开放且更易于二次开发。</div>
                            <div class="frame-desc mt-auto">副信息</div>
                        </div>
                    </div>
                </div>
                <div class="position-absolute top-50 end-0 translate-middle-y content-link">
                    <a href="#" role="button" class="btn btn-info me-3">长文字按钮</a>
                </div>
                <a href="post.html" class="text-decoration-none stretched-link"></a>
            </div>
            <!--文本框-->
            <div class="position-relative frame-box-text">
                <div class="frame-text-content">
                    <p>Fresns 是一款免费开源的社交网络服务软件，专为跨平台而打造的通用型社区产品，支持灵活多样的内容形态，可以满足多种运营场景，符合时代潮流，更开放且更易于二次开发。</p>
                    <p>Fresns 是一款免费开源的社交网络服务软件，专为跨平台而打造的通用型社区产品，支持灵活多样的内容形态，可以满足多种运营场景，符合时代潮流，更开放且更易于二次开发。</p>
                </div>
                <div class="frame-text-file d-flex align-content-start flex-wrap file-image-2">
                    <a href="../../assets/images/temp/image.jpg" class="position-relative content-link">
                        <img src="../../assets/images/temp/image.jpg" class="img-fluid">
                        <span class="position-absolute bottom-0 end-0 badge bg-light text-dark me-3 mb-2">长图</span>
                    </a>
                    <a href="../../assets/images/temp/image.jpg" class="position-relative content-link">
                        <img src="../../assets/images/temp/image.jpg" class="img-fluid">
                    </a>
                </div>
                <a href="post.html" class="text-decoration-none stretched-link"></a>
            </div>
            <!--信息框扩展 结束-->
        </div>
    </div>

    <footer class="text-center" style="margin-top:100px;">
        <div><img src="../../assets/images/fresns-logo.png" height="30"></div>
        <p class="mt-3 mb-5"><a href="https://tangjie.me" target="_blank">唐杰出品</a></p>
    </footer>
    
    <script src="../../assets/javascript/bootstrap.bundle.min.js"></script>
    <script src="../../assets/javascript/fresns.js"></script>
</body>

</html>